<?xml version='1.0' encoding='UTF-8' ?>
<!--

    Copyright (c) 2014, 2019 Oracle and/or its affiliates. All rights reserved.

    This program and the accompanying materials are made available under the
    terms of the Eclipse Distribution License v. 1.0, which is available at
    http://www.eclipse.org/org/documents/edl-v10.php.

    SPDX-License-Identifier: BSD-3-Clause

-->

<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:jsf="http://xmlns.jcp.org/jsf">

    <h:head>
    </h:head>
    <h:body>
        <h:outputStylesheet name="css/stylesheet.css" target="head"/>

        <h:form prependId="false">
            <h2>Ticket Reservation Form</h2>
            <p>Welcome to the reservation form for <i>Hit Broadway Musical</i>!</p>
            <p>
                <label>Name (First Last):</label>
                <br/>
                <input type="text" jsf:id="full_name" name="full_name" 
                       placeholder="John Doe" value="#{reservationBean.name}" 
                       required="required" title="Enter your name."/>
            </p>
            <p>
                <label>Email:</label>
                <br/>
                <input type="email" jsf:id="email" name="email" 
                       value="#{reservationBean.email}" required="required"
                       title="Enter email."/>
            </p>
            <p>
                <label>Enter Email Again:</label>
                <br/>
                <input type="email" jsf:id="emailAgain" name="emailAgain" 
                       value="#{reservationBean.emailAgain}" required="required" 
                       title="Enter email again." oninput="check(this)"/>
            </p>

            <p>
                <label>Performance Date:</label>
                <br/>
                <input type="date" jsf:id="date" name="date" 
                       value="#{reservationBean.date}" required="required"
                       title="Enter or choose a date."/>
            </p>
            <p>
                <label>Number of Tickets:</label>
                <br/>
                <h:inputText id="tickets" value="#{reservationBean.tickets}">
                    <f:passThroughAttributes value="#{reservationBean.ticketAttrs}"/>
                    <f:ajax event="change" render="total" 
                            listener="#{reservationBean.calculateTotal}"/>
                </h:inputText>
            </p>
            <p>
                <label>Ticket Price:</label>
                <br/>
                <h:inputText id="price" p:type="number" 
                             value="#{reservationBean.price}" 
                             p:min="80" p:max="120"
                             p:step="20" p:required="required" 
                             p:title="Enter a price: 80, 100, 120, or 140.">
                    <f:ajax event="change" render="total" 
                            listener="#{reservationBean.calculateTotal}"/>
                </h:inputText>
            </p>

            <p>
                <label>Estimated Total:</label>
                <br/>
                <output jsf:id="total" name="total">
                    #{reservationBean.totalValue}
                </output>
            </p>

            <p>
                <h:commandButton value="Make Reservation" 
                                 action="confirmation"/>
                <input jsf:id="clear" name="clear" value="Clear" type="submit">
                    <f:ajax render="@all" listener="#{reservationBean.clear}"/>
                </input>
            </p>
        </h:form>

        <script>
            function check(input) {
                if (input.value !== document.getElementById('email').value) {
                    input.setCustomValidity('The two email addresses must match.');
                } else {
                    // input is valid -- reset the error message
                    input.setCustomValidity('');
                }
            }
        </script>
    </h:body>
</html>
